<template>
    <el-container>
      <el-header>
        <h2>用户管理页面</h2>

      </el-header>
      <el-main>
        <el-button type="primary" @click="addUserFormVisible = true">添加用户</el-button>
         <!-- 弹出模态框：添加/编辑用户 -->
  <el-dialog title="添加用户" :visible.sync="addUserFormVisible" width="50%">
    <el-form ref="addUserForm" :model="addUserForm" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="addUserForm.username"></el-input>
      </el-form-item>
      
      <el-form-item label="用户类型">
        <el-select v-model="addUserForm.userType">
          <el-option
            v-for="(type, index) in userTypes"
            :key="index"
            :label="type.label"
            :value="type.value"></el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="权限分配">
        <el-checkbox-group v-model="addUserForm.permissions">
          <el-checkbox v-for="(permission, index) in permissionsOptions" :key="index" :label="permission.label" :value="permission.value"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    
    <div slot="footer">
      <el-button @click="addUserFormVisible = false">取消</el-button>
      <el-button type="primary" @click="submitAddUserForm">保存</el-button>
    </div>
  </el-dialog>
  <el-dialog title="编辑——权限分配" :visible.sync="editUserFormVisible" width="50%">
    <el-form ref="editUserForm" :model="editUserForm" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="editUserForm.username"></el-input>
      </el-form-item>
      
      <el-form-item label="用户类型">
        <el-select v-model="editUserForm.userType">
          <el-option
            v-for="(type, index) in userTypes"
            :key="index"
            :label="type.label"
            :value="type.value"></el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="权限分配">
        <el-checkbox-group v-model="editUserForm.permissions">
          <el-checkbox v-for="(permission, index) in permissionsOptions" :key="index" :label="permission.label" :value="permission.value"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    
    <div slot="footer">
      <el-button @click="editUserFormVisible = false">取消</el-button>
      <el-button type="primary" @click="baocun()">保存</el-button>
    </div>
  </el-dialog>
        <!-- 用户表格 -->
        <el-table :data="users" style="width: 100%">
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="userType" label="用户类型" />
          <el-table-column prop="permissions" label="权限分配" />
          <!-- 操作列 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="editUser(scope.row)">编辑——权限分配</el-button>
              <el-button size="small" type="danger" @click.native.prevent="deleteRow(scope.$index, users)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"></el-pagination>
      </el-main>
  
      <!-- 弹出模态框：添加/编辑用户 -->
      <!-- ...同上段回复中的模态框部分... -->
    </el-container>
  </template>
  
  <script>
  export default {
    data() {
      return {
      permissionsOptions: [
        { label: '查看', value: 'view' },
        { label: '发布', value: 'publish' },
        { label: '审核', value: 'audit' },
        { label: '编辑', value: 'edit' },
        // 添加更多权限选项...
      ],
        addUserFormVisible: false,
        editUserFormVisible:false,
      addUserForm: {
        username: '',
        userType: '',
        permissions: [],
      },
      editUserForm: {
        username: '',
        userType: '',
        permissions: [],
      },
      userTypes: [
        { label: '企业', value: '企业' },
        { label: '审核员', value: '审核员' },
        { label: '第三方监管机构', value: '第三方监管机构' },
      ],
        users: [
          // 虚拟数据示例
          { username: '企业账号01', userType: '企业', permissions: '查看、发布' },
          { username: '审核员01', userType: '审核员', permissions: '审核、编辑' },
          { username: '监管机构01', userType: '第三方监管机构', permissions: '全面访问' },
          // 更多用户...
        ],
        dialogVisible: false,
        currentEditUser: {},
        // 其他状态变量...
      };
    },
    
    methods: {
        editUser(row) {
      // 将当前行数据赋值给编辑表单
      this.editUserForm = {
        username: row.username,
        userType: row.userType,
        permissions: row.permissions.split('、'), // 假设permissions是一个逗号分隔的字符串列表
      };

      this.editUserFormVisible = true; // 显示编辑模态框
    },
    // 打开或关闭添加用户的对话框
    toggleAddUserForm() {
      this.addUserFormVisible = !this.addUserFormVisible;
      if (!this.addUserFormVisible) {
        this.resetAddUserForm();
      }
    },

    // 清空添加用户表单
    resetAddUserForm() {
      this.addUserForm = { username: '', userType: '', permissions: [] };
    },

    baocun(){
        this.$message({
        message:'修改成功',
        type:'success'
      })
    },
    // 添加新用户的提交事件处理
    submitAddUserForm() {
      this.users.push(this.addUserForm); // 在这里模拟添加至列表，实际场景下应发起API请求
      this.toggleAddUserForm();
      this.resetAddUserForm();
      this.$message({
        message:'成功添加',
        type:'success'
      })
    },
  
      // 添加用户的表单提交方法
      submitForm() {
        // 在这里将当前编辑的用户信息添加到用户列表，或者更新原有记录（根据实际情况）
        // 实际场景下会发起添加或更新用户的API请求
        if (this.currentEditUser.id) {
          // 更新已有用户
        } else {
          // 添加新用户至列表
          this.users.push(this.currentEditUser);
        }
        this.resetForm();
      },
  
      resetForm() {
        this.currentEditUser = {};
        this.dialogVisible = false;
      },
      deleteRow(index, rows) {
        this.$confirm("请确认是否删除该用户不可撤销, 是否继续操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
            rows.splice(index, 1);
              this.$message({
                message: "删除成功",
                type: "success",
              });
        })
        .catch(() => {
          //取消
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      }
    },
  };
  </script>